<template>
    <main>
        <div class="ml-hero ml-wrapper">
            <div class="container">
                <div class="row md-reverse">
                    <div class="col-md-6 jumbotron"><h2>{{$t('life_banner_title')}}</h2>
                        <p>{{$t('life_banner_desc')}}</p><a href="/download"
                                                                                                      class="ml-btn solid large"
                                                                                                      event="Overseas Start Btn">{{$t('life_banner_button')}}</a>
                    </div>
                    <div class="col-md-6 imgwrapper img-life"><img class="fl-right"
                                                                   src="../assets/hero-life.56794.png"
                                                                   alt="hero"></div>
                </div>
            </div>
        </div>
        <div class="ml-solution-feature ml-wrapper bg">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 imgwrapper"><img src="../assets/feature-student-1.8fe17.png"
                                                          alt="feature"></div>
                    <div class="col-md-6 content"><img src="../assets/ic48_1.863bf.svg">
                        <h3>{{$t('life_li_1_title')}}</h3>
                        <p>{{$t('life_li_1_desc')}}</p><a href="/download"
                                                                                           class="ml-btn outline small"
                                                                                           event="Overseas Start Btn">{{$t('life_banner_button')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="ml-solution-feature ml-wrapper">
            <div class="container">
                <div class="row md-reverse">
                    <div class="col-md-6 content"><img src="../assets/ic48_2.1732a.png">
                        <h3>{{$t('life_li_2_title')}}</h3>
                        <p>{{$t('life_li_2_desc')}}</p><a href="/download" class="ml-btn outline small" event="Overseas Start Btn">{{$t('life_banner_button')}}</a>
                    </div>
                    <div class="col-md-6 imgwrapper"><img class="fl-right"
                                                          src="../assets/feature-student-2.d1110.png"
                                                          alt="feature"></div>
                </div>
            </div>
        </div>
        <div class="ml-solution-feature ml-wrapper bg">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 imgwrapper"><img src="../assets/feature-student-3.1b9e5.png"
                                                          alt="feature"></div>
                    <div class="col-md-6 content"><img src="../assets/ic48_3.4a440.svg">
                        <h3>{{$t('life_li_3_title')}}</h3>
                        <p>{{$t('life_li_3_desc')}}</p><a href="/download"
                                                                                               class="ml-btn outline small"
                                                                                               event="Overseas Start Btn">{{$t('life_banner_button')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="ml-solution-review ml-wrapper bg-life">
            <div class="container">
                <div class="user-review">
                    <div class="avatar"><img src="../assets/review-avatar-1.b1ff8.png" alt="user-avatar"></div>
                    <p>{{$t('life_message_desc')}}</p><span>{{$t('life_message_title')}}</span> <a
                    href="/download" class="ml-btn solid large" event="Overseas Start Btn">{{$t('life_banner_button')}}</a></div>
            </div>
        </div>
    </main>
</template>

<script>
export default {
    name: "ForFile",
    data() {
        return {}
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .ml-hero .row {
        align-items: flex-start!important;
        flex-direction: column-reverse;
        min-height: auto!important;
        .jumbotron {
            h2 {
                font-size: 28px!important;
            }
            a {
                display: flex!important;
            }
        }
        .imgwrapper {
            margin-top: 24px;
            overflow: hidden;
            img {
                width: 100%!important;
                margin-top: 0!important;
            }
        }
    }
    .ml-solution-feature {
        margin-top: 48px!important;
        background: none!important;
        .row {
            min-height: auto!important;
        }
        .imgwrapper {
            display: none;
        }
        .content {
            h3 {
                font-size: 24px!important;
            }
            a {
                padding: 0 48px!important;
            }
        }
    }

    .ml-solution-review {
        margin-top: 64px;
        .user-review {
            p {
                font-size: 16px!important;
                overflow: hidden;
            }
        }
    }
}

main {
    .bg {
        background: #FAFAFA;
    }

    .ml-hero {
        margin-top: 68px;

        .row {
            min-height: 512px;
            align-items: center;

            .jumbotron {
                background: none;

                h2 {
                    font-size: 42px;
                }

                p {
                    margin-top: 32px;
                }

                a {
                    margin-top: 32px;
                    height: 50px;
                    padding: 0 46px;
                    font-weight: 500;
                    font-size: 16px;
                    background: #4D55E8;
                    color: #fff;
                    display: inline-flex;
                    justify-content: center;
                    border-radius: 4px;
                    transition: all .2s ease;
                    cursor: pointer;
                }
            }

            .imgwrapper {
                position: relative;

                img {
                    width: 534px;
                    margin-top: -22px;
                    float: right;
                }
            }

            .img-student:before {
                display: block;
                width: 75px;
                height: 75px;
                background: url(../assets/before_3.48e22.png) no-repeat;
                background-size: contain;
                left: 100px;
                top: -66px;
                animation: floatdown 6s ease-in-out infinite;
                position: absolute;
                content: "";
            }

            .img-student:after {
                display: block;
                width: 584px;
                height: 93px;
                background: url(../assets/before_4.0c53f.png) no-repeat;
                background-size: contain;
                left: 0;
                bottom: -36px;
                animation: floatup 6s ease-in-out infinite;
                position: absolute;
                content: "";
            }
        }
    }

    .ml-solution-feature {
        .row {
            min-height: 540px;
            align-items: center;
        }

        .imgwrapper {
            overflow-x: hidden !important;

            img {
                width: 460px;
            }
        }

        .content {
            img {
                width: 48px;
                height: 48px;
                margin-bottom: 16px;
            }

            h3 {
                font-size: 32px;
            }

            p {
                margin-top: 16px;
                font-size: 14px;
                line-height: 1.6;
                color: #7B7B7B;
            }

            a {
                margin-top: 32px;
                height: 38px;
                padding: 0 32px;
                font-size: 14px;
                color: #4D55E8;
                font-weight: 500;
                border: 1px solid #4D55E8;
                display: inline-flex;
                justify-content: center;
                border-radius: 4px;
                transition: all .2s ease;
                cursor: pointer;
                background: none;
            }
        }
    }

    .ml-solution-review {

        .user-review {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 410px;
            padding-bottom: 15px;

            .avatar {
                img {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    box-shadow: 0 14px 24px rgb(0 0 0 / 6%);
                }
            }

            p {
                margin-top: 40px;
                font-size: 18px;
                line-height: 1.7;
                text-align: center;
                color: #222;
                max-width: 754px;
                position: relative;
            }

            p::before {
                content: "";
                width: 1186px;
                height: 268px;
                background: url(../assets/before_review_top.480e9.png) no-repeat;
                background-size: cover;
                position: absolute;
                left: -240px;
                top: -180px;
                animation: floatdown 6s ease-in-out infinite;
            }

            p::after {
                content: "";
                width: 74px;
                height: 70px;
                background: url(../assets/before_review_bottom.48fa6.png) no-repeat;
                background-size: cover;
                position: absolute;
                right: -80px;
                top: 80px;
                animation: floatup 6s ease-in-out infinite;
            }

            span {
                font-size: 13px;
                color: #7B7B7B;
                margin-top: 24px;
            }

            a {
                border-radius: 100px;
                height: 46px;
                box-shadow: 0 14px 30px rgb(0 0 0 / 13%);
                margin-top: 32px;
                padding: 0 46px;
                font-weight: 500;
                font-size: 16px;
                background: #4D55E8;
                color: #fff;
                display: inline-flex;
                justify-content: center;
                transition: all .2s ease;
                cursor: pointer;
            }
        }
    }
}
</style>
